<template>
  <div class="variable-panel">
    <div class="panel-content">
      <!-- 头部 -->
      <div class="panel-header">
        <h2 class="panel-title">变量管理</h2>
        <a-button @click="$emit('close')" type="text" size="small">
          <template #icon>
            <icon-close />
          </template>
        </a-button>
      </div>

      <!-- 标签页 -->
      <a-tabs v-model:activeKey="activeTab" class="variable-tabs">
        <a-tab-pane key="process" title="流程变量">
          <div class="variables-section">
            <div class="variables-list">
              <div
                v-for="variable in processVariables"
                :key="variable.id"
                class="variable-item"
              >
                <div class="variable-label">{{ variable.name }}</div>
                <div class="variable-value">
                  <span class="value-text">{{
                    variable.display ?? variable.value
                  }}</span>
                  <a-button
                    @click="copyToClipboard(variable.value)"
                    type="text"
                    size="mini"
                    class="copy-btn"
                  >
                    <template #icon>
                      <icon-copy />
                    </template>
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="output" title="出参变量">
          <div class="variables-section">
            <div class="variables-list">
              <div
                v-for="variable in outputVariables"
                :key="variable.id"
                class="variable-item"
              >
                <div class="variable-label">{{ variable.name }}</div>
                <div class="variable-value">
                  <span class="value-text">{{
                    variable.display ?? variable.value
                  }}</span>
                  <a-button
                    @click="copyToClipboard(variable.value)"
                    type="text"
                    size="mini"
                    class="copy-btn"
                  >
                    <template #icon>
                      <icon-copy />
                    </template>
                  </a-button>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="system" title="系统变量">
          <div class="variables-section">
            <!-- 添加系统变量 -->
            <div class="add-variable-section">
              <h3 class="section-title">添加系统变量</h3>
              <div class="form-fields">
                <a-input
                  v-model="newSystemVariable.name"
                  placeholder="变量名称"
                  size="small"
                  style="margin-bottom: 8px"
                />
                <a-input
                  v-model="newSystemVariable.value"
                  placeholder="变量值"
                  size="small"
                  style="margin-bottom: 8px"
                />
                <a-button
                  @click="addSystemVariable"
                  type="primary"
                  size="small"
                  long
                >
                  添加变量
                </a-button>
              </div>
            </div>

            <!-- 系统变量列表 -->
            <div class="variables-list">
              <div
                v-for="variable in systemVariables"
                :key="variable.id"
                class="variable-item"
              >
                <div class="variable-label">{{ variable.name }}</div>
                <div class="variable-value">
                  <span class="value-text">{{ variable.value }}</span>
                  <div class="variable-actions">
                    <a-button
                      @click="copyToClipboard(variable.value)"
                      type="text"
                      size="mini"
                      class="copy-btn"
                    >
                      <template #icon>
                        <icon-copy />
                      </template>
                    </a-button>
                    <a-button
                      @click="deleteSystemVariable(variable.id)"
                      type="text"
                      status="danger"
                      size="mini"
                    >
                      <template #icon>
                        <icon-delete />
                      </template>
                    </a-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { IconClose, IconCopy, IconDelete } from "@arco-design/web-vue/es/icon";
import { useWorkflowVariables } from "@/components/workflow/useWorkflowVariables";

interface WorkflowVariable {
  id: string;
  name: string;
  type: string;
  defaultValue: any;
  description: string;
}

interface VariableItem {
  id: string;
  name: string;
  value: string;
}

interface Emits {
  (e: "close"): void;
}

const emit = defineEmits<Emits>();

const { processVariables, outputVariables, systemVariables } =
  useWorkflowVariables();
const activeTab = ref("process");

const newSystemVariable = reactive({
  name: "",
  value: "",
});

let systemVariableIdCounter = 100;

const addSystemVariable = () => {
  if (!newSystemVariable.name.trim() || !newSystemVariable.value.trim()) {
    alert("请输入变量名称和值");
    return;
  }

  const variable: VariableItem = {
    id: `sys_${systemVariableIdCounter++}`,
    name: newSystemVariable.name,
    value: newSystemVariable.value,
  };

  systemVariables.value.push(variable);

  // 重置表单
  newSystemVariable.name = "";
  newSystemVariable.value = "";
};

const deleteSystemVariable = (id: string) => {
  if (confirm("确定要删除这个系统变量吗？")) {
    systemVariables.value = systemVariables.value.filter((v) => v.id !== id);
  }
};

const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text);
    // 可以添加一个提示，比如使用 Arco Design 的 Message 组件
    console.log("已复制到剪贴板:", text);
  } catch (err) {
    console.error("复制失败:", err);
  }
};
</script>

<style scoped>
.variable-panel {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 80%;
  width: 480px;
  background: var(--color-bg-2, #fff);
  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 8px;
  z-index: 20;
  overflow-y: auto;
}

.panel-content {
  padding: 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-2, #e5e7eb);
}

.panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-1, #374151);
}

.variable-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.variables-section {
  flex: 1;
  overflow-y: auto;
}

.add-variable-section {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--color-fill-2, #f9fafb);
  border-radius: 6px;
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-1, #374151);
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.variables-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.variable-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--color-bg-2, #fff);
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 6px;
  gap: 12px;
}

.variable-label {
  flex: 1;
  padding: 6px 10px;
  background: var(--color-fill-2, #f9fafb);
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-text-2, #6b7280);
  min-width: 120px;
}

.variable-value {
  flex: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.value-text {
  flex: 1;
  padding: 6px 10px;
  background: var(--color-fill-1, #f8fafc);
  border: 1px solid var(--color-border-2, #e5e7eb);
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-text-1, #374151);
  font-family: monospace;
}

.variable-actions {
  display: flex;
  gap: 4px;
}

.copy-btn {
  padding: 4px;
  min-width: auto;
}

/* Arco Design Vue 标签页样式覆盖 */
:deep(.arco-tabs-nav-tab) {
  background: var(--color-fill-2, #f9fafb);
  border-bottom: 1px solid var(--color-border-2, #e5e7eb);
}

:deep(.arco-tabs-nav-tab .arco-tabs-tab) {
  color: var(--color-text-3, #6b7280);
  font-weight: 500;
}

:deep(.arco-tabs-nav-tab .arco-tabs-tab-active) {
  color: #3b82f6;
  font-weight: 600;
}

:deep(.arco-tabs-content) {
  padding: 16px 0;
  flex: 1;
  overflow-y: auto;
}
</style>
